<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>jQuery Test~</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css" rel="stylesheet">
.selected {
	font-weight: bold;
}
body.narrow .chapter {
	width: 400px;
}
body.large .charpter {
	font-size: 1.5em;
}
.hidden {
	display: none;
}
#switcher .hover {
	cursor: pointer;
	background-color: #afa;
}
  </style>
  <script type="text/javascript" src="../jquery-1.7.2.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
	$("#switcher .button").bind('click', function() {
		$('body').removeClass();
		if (this.id == "switcher-narrow")
		{
			$("body").addClass('narrow');
		}
		if (this.id == "switcher-large")
		{
			$("body").addClass("large");
		}
		$("#switcher .button").removeClass("selected");
		$(this).addClass("selected");
	}).hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});
	$("#switcher h3").toggle(function() {
		$("#switcher .button").addClass('hidden');
	}, function() {
		$('#switcher .button').removeClass('hidden');
	});
	$("#switcher").click(function(event) {
		if (event.target == this)
		{
			$("#switcher .button").toggleClass('hidden');
		}
	});
});
  </script>
 </head>

 <body>
  <div id="switcher">
   <h3>Style Switcher</h3>
   <div class="button selected" id="switcher-default">Default</div>
   <div class="button" id="switcher-narrow">Narrow</div>
   <div class="button" id="switcher-large">Large</div>
  </div>
  <p class="chapter">This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.</p>
  <p class="chapter">This guide contains no "click me" examples. The intention of providing only "copy me" code is to invite you to try it for yourself. Copy an example, see what it does, and modify it.</p>
  <p class="chapter">To start, we need a copy of the jQuery library, which we can get from the main download page. The jQuery Starterkit provides some markup and CSS to work with. After downloading and extracting its content we put jquery.js into the same directory and open starterkit.html and custom.js with your favorite editor and starterkit.html with a browser.</p>
  <p class="chapter">This page just loads the jquery.js library (make sure the URL points to where you stored your copy of jquery! This example assumes that you store it in the same directory as this example file). Two comments indicate where we will expand this template with code.</p>
Now we have everything to start with the notorious "Hello world" example.
 </body>
</html>